<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bar Gauge Widget</title>
<style>
	@import "../_Gauge.css";
	@import "../../../dojo/resources/dojo.css";
	@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
	djConfig = {
		parseOnLoad: true,
		isDebug: true
	};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
	dojo.require('dojox.gauges.BarGauge');
	dojo.require('dojox.gauges.BarIndicator');
	dojo.require('dijit.form.Button');
	dojo.require('dojo.parser');


	dojo.addOnLoad(init);

	var gauge, valueIndicator, targetIndicator, handle;
	var ranges1 = [ {low:5, high:10, hover:'5 - 10'},
				   {low:10, high:20, hover:'10 - 20'},
				   {low:20, high:30, hover:'20 - 30'},
				   {low:30, high:40, hover:'30 - 40'},
				   {low:40, high:50, hover:'40 - 50'},
				   {low:50, high:60, hover:'50 - 60'},
				   {low:60, high:70, hover:'60 - 70'},
				   {low:70, high:75, hover:'70 - 75'}
				 ];
	var ranges2 = [ {low:5, high:10, hover:'5 - 10'},
				   {low:10, high:20, hover:'10 - 20'},
				   {low:20, high:30, hover:'20 - 30'},
				   {low:30, high:40, hover:'30 - 40'},
				   {low:40, high:50, hover:'40 - 50'},
				   {low:50, high:60, hover:'50 - 60'},
				   {low:60, high:70, hover:'60 - 70'},
				   {low:70, high:75, hover:'70 - 75'}
				 ];
	
	function init() {
		gauge = dojo.byId("defaultGauge");
		gauge = new dojox.gauges.BarGauge({
			id: "defaultGauge",
			width: 300,
			height: 55,
			dataHeight: 25,
			dataWidth: 275,
			dataY: 25,
			dataX: 10,
			ranges: ranges1,
			majorTicks: {
				length: 5,
				width: 1,
				offset: -5,
				interval: 5
			},
			indicators: [
				new dojox.gauges.BarIndicator({
					value:17,
					width: 7,
					hover:'Value: 17',
					title: 'Value'
				}),
				new dojox.gauges.BarLineIndicator({
					value:6,
					color:'#D00000',
					hover:'Target: 6',
					title: 'Target'
				})
			]
		}, gauge);
		gauge.startup();

		var fill = {
			type: "linear",
			x1: 0,
			y1: gauge.height,
			x2: 0,
			y2: 0,
			colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
		};
		gauge = dojo.byId("programmaticGauge");
		gauge = new dojox.gauges.BarGauge({
			id: "programmaticGauge",
			width: 300,
			height: 55,
			dataHeight: 25,
			dataWidth: 275,
			dataX: 10,
			dataY: 25,
			useRangeStyles: 8,
			background: fill
		}, gauge);
		gauge.startup();
		
		gauge.addRanges(ranges2);
		gauge.setMinorTicks({interval: 1,
							 length:2,
							 offset:-2,
							 width: 1});
		gauge.setMajorTicks({interval: 5,
							 length:5,
							 offset:-5,
							 width: 1,
							 font: {family: "Arial", style: "italic", variant: 'small-caps', weight: 'bold', size: "12px"}});
		valueIndicator = new dojox.gauges.BarIndicator({
			value:17,
			width: 7,
			hover:'Value: 17', 
			title: 'Value',
			easing: dojo.fx.easing.bounceOut
		});
		targetIndicator = new dojox.gauges.BarLineIndicator({
			value:6,
			color:'#D00000',
			hover:'Target: 6',
			title: 'Target',
			// Can use string to indicate easing function (just like in declarative)
			easing: 'dojo.fx.easing.linear'
		});
		gauge.addIndicator(targetIndicator);
		gauge.addIndicator(valueIndicator);
		//targetIndicator.update(Math.floor(Math.random() * 70) + 5);
		handle = setInterval((function(t, v){
			return (function(){
				t.update(Math.floor(Math.random() * 70) + 5);
				v.update(Math.floor(Math.random() * 70) + 5);
			});
		})(valueIndicator, targetIndicator), 3000);
		dojo.connect(dijit.byId('stop'), 'onClick', function(){
			clearInterval(handle);
		});
	}
	dojo.addOnUnload(function(){
		clearInterval(handle);
	});
</script>
</head>
<body class="tundra">
<h1>Bar Gauge Widget</h1>
<h2>Default Colored Gauge</h2>
<div id="defaultGauge"></div>
<h2>CSS Themed Ranges, Gradient Background, Updating to Random Values on 3s Timer</h2>
<div id="programmaticGauge"></div>
<button dojoType="dijit.form.Button" id="stop">Stop Timer</button>
<h2>Declarative, Gradient Ranges, Gradient Background, No Indicator Boxes</h2>
<div	dojoType="dojox.gauges.BarGauge"
		id="declarativeGauge"
		width="300"
		height="55"
		dataHeight="25"
		dataWidth="275"
		dataX="10"
		dataY="25"
		useRangeStyles="0"
		hideValues="true"
		majorTicks="{length: 5, width: 1, offset: -5, interval: 5}"
		background="{
			type: 'linear',
			x1: 0,
			x2: 0,
			y1: 55,
			y2: 0,
			colors: [{offset: 0, color: '#ECECEC'}, {offset: 1, color: 'white'}]
		}">
	<div	dojoType="dojox.gauges.Range"
			low="5"
			high="10"
			hover="5 - 10"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#606060'}, {offset: 1, color: '#707070'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range1"
			low="10"
			high="20"
			hover="10 - 20"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#707070'}, {offset: 1, color: '#808080'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range2"
			low="20"
			high="30"
			hover="20 - 30"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#808080'}, {offset: 1, color: '#909090'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range3"
			low="30"
			high="40"
			hover="30 - 40"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#909090'}, {offset: 1, color: '#A0A0A0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range4"
			low="40"
			high="50"
			hover="40 - 50"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#A0A0A0'}, {offset: 1, color: '#B0B0B0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range5"
			low="50"
			high="60"
			hover="50 - 60"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#B0B0B0'}, {offset: 1, color: '#C0C0C0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range6"
			low="60"
			high="70"
			hover="60 - 70"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#C0C0C0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			id="range7"
			low="70"
			high="75"
			hover="70 - 75"
			color="{
				'type': 'linear',
				'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}]
			}">
	</div>
	<div	dojoType="dojox.gauges.BarLineIndicator"
			id="target"
			value="6"
			color="#D00000"
			width="3"
			hover="Target: 6"
			title="Target">
	</div>
	<div 	dojoType="dojox.gauges.BarIndicator"
			id="value"
			value="17"
			length="135"
			width="3"
			hover="Value: 17"
			title="Value">
	</div>
</div>
<h2>Declarative, (Ugly) Colored Ranges, No Numbers, No Indicator Boxes</h2>
<div	dojoType="dojox.gauges.BarGauge"
		id="declarativeGauge2"
		width="300"
		height="35"
		dataHeight="25"
		dataWidth="290"
		useRangeStyles="0"
		hideValues="true"
		background="{color: 'green'}">
	<div	dojoType="dojox.gauges.Range"
			low="5"
			high="10"
			hover="5 - 10"
			color="{color: 'red'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="10"
			high="20"
			hover="10 - 20"
			color="{color: '#FFA500'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="20"
			high="30"
			hover="20 - 30"
			color="{color: 'yellow'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="30"
			high="40"
			hover="30 - 40"
			color="{color: '#7FFF00'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="40"
			high="50"
			hover="40 - 50"
			color="{color: '#00FFFF'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="50"
			high="60"
			hover="50 - 60"
			color="{color: 'blue'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="60"
			high="70"
			hover="60 - 70"
			color="{color: '#191970'}">
	</div>
	<div	dojoType="dojox.gauges.Range"
			low="70"
			high="75"
			hover="70 - 75"
			color="{color: 'purple'}">
	</div>
	<div	dojoType="dojox.gauges.BarLineIndicator"
			value="6"
			color="#D00000"
			hover="Target: 6"
			title="Target">
	</div>
	<div 	dojoType="dojox.gauges.BarIndicator"
			value="55"
			width="7"
			hover="Value: 55"
			title="Value">
	</div>
</div>
</body>
</html>
